/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, LineColumn, InputLine, TextArea, Input, Select, SuffixInput, BlobInputList, InputDatalist,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useItemInputControl,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";
import {检验结果选} from "./editItem";

export const 工作介质选=['空气','内筒/夹套：食品/蒸汽'];
interface Props  extends InternalItemProps{
    label?: string;
    config?: any[];    //有配置模式的 : 表对象的默认取值；
}
//多出一个  '工作介质' :给编辑器显示默认值的。
export const itemA下结论=['问题及处','安全评定','检验结论','结论压力','结论温度','结论介质','检验日期','检验日期1','新下检日','结论说明' ];
export const itemA下结论m=itemA下结论.concat(['工作压力','工作温度','工作介质']);

//年度检查：
export const ConclusionVsNj=
React.forwardRef((
    { children, show ,alone=true,redId,nestMd,label}:Props,  ref
) => {
    const defvcbFunc = React.useCallback((par: any) => {
        const {结论压力,结论温度,结论介质 }=par||{};
        if(!结论压力)   par.结论压力=par?.工作压力;
        if(!结论温度)   par.结论温度=par?.工作温度;
        if(!结论介质)   par.结论介质=par?.工作介质;
        return  par;
    }, []);
    const [getInpFilter]=useMeasureInpFilter(null,itemA下结论m,defvcbFunc);
    const {inp, setInp} = useItemInputControl({ ref });
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">问题 及其处理：</Text>
        [检查发现的缺陷位置、性质、程度及处理意见（必要时附图或附页）]
        <TextArea value={inp?.问题及处 || ''} rows={8}
                  onChange={e => setInp({...inp, 问题及处: e.currentTarget.value || undefined})}/>
        <hr/>
        <Text variant="h5">检验结论-检查结论{'>>'}</Text>
        <InputLine  label='安全状况等级评定为' >
            <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                    value={ inp?.安全评定  ||''} onChange={e => setInp({ ...inp, 安全评定: e.currentTarget.value||undefined}) }>
                <option></option>
                <option>1级</option>
                <option>2级</option>
                <option>3级</option>
                <option>4级</option>
                <option>5级</option>
            </Select>
        </InputLine>
        <InputLine  label='检查结论' >
            <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                    value={ inp?.检验结论  ||''} onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }>
                <option></option>
                <option>符合要求</option>
                <option>基本符合要求</option>
                <option>不符合要求</option>
            </Select>
        </InputLine>
        允许（监控）使用参数：
        <LineColumn column={4}>
            <InputLine  label='压力' >
                <SuffixInput  value={inp?.结论压力 ||''}
                              onChange={e=>setInp({ ...inp, 结论压力: e.currentTarget.value||undefined})}>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='温度' >
                <SuffixInput  value={inp?.结论温度 ||''}
                              onChange={e=>setInp({ ...inp, 结论温度: e.currentTarget.value||undefined})}>℃</SuffixInput>
            </InputLine>
            <InputLine  label='介质'>
                <InputDatalist value={inp?.结论介质 ||''}  datalist={工作介质选}
                               onListChange={v => setInp({ ...inp, 结论介质: v||undefined})} />
            </InputLine>
            <InputLine label='设置检验日期'>
                <Input value={inp?.检验日期 || ''} type='date'
                       onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
            </InputLine>
            <InputLine  label='检验起始日期' >
                <Input  value={inp?.检验日期1 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
            </InputLine>
            <InputLine  label='下次年度检查日期' >
                <Input  value={inp?.新下检日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
            </InputLine>
        </LineColumn>
        结论说明: （监控运行需要解决的问题及完成期限）
        <TextArea  value={inp?.结论说明 ||''} rows={10}
                   onChange={e => setInp({ ...inp, 结论说明: e.currentTarget.value||undefined}) } />
    </InspectRecordLayout>;
});

const cb检查项目= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={2} datalist={[]}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb检查结果= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return <InputDatalist value={(inp?.[name]) || ''} datalist={检验结果选}
                  style={{display: 'inline-flex', width: '10rem'}}
                  onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const config非金要求=[
    ['检查项目','n',320,cb检查项目],['检查结果','r',180,cb检查结果],['备注','m',230]
] as Each_ZdSetting[];
export const itemA非金要求=['非金表','附页备注'];
export const NonMetallic=
    React.forwardRef(({ children, show ,alone=true,refWidth,label,}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA非金要求,);
        const {inp, setInp} = useItemInputControl({ ref });
        const headview=<Text variant="h5">
            {label}：
        </Text>;
        const [render]=useTableEditor({inp,setInp,
            headview, config: config非金要求, table:'非金表',column:2 });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                {render}
                <hr/>
                注：无问题或者合格的检查项目在检查结果栏打“√”；检验项目存在一般问题在检查结果栏打“○”；检验项目存在严重问题，单项结论为“不符合要求”或“不合格”在检查结果栏打“×”，并且在备注中说明；实际没有的检查项目在
                检查结果栏填写“无此项”或划“/”，或者按照实际的检查项目编制；无法检查的项目在检查结果栏中划“一”，并且在备注栏中说明原因。
                <Text variant="h4">检查报告附页-备注：</Text>
                <TextArea value={inp?.附页备注 || ''} rows={8}
                          onChange={e => setInp({...inp, 附页备注: e.currentTarget.value || undefined})}/>
                {children}
            </InspectRecordLayout>
        );
    });

